<template>
  <div class="app-container">
    <div class="row">
      <el-form :inline="true" :model="queryParams">
        <div class="float">
          <div>
            <el-form-item label="用户昵称">
              <el-input v-model="queryParams.name" placeholder="搜索的用户昵称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small"
                          @click="search">搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="small" 
                          @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </div>
        <div class="float">
          <div>
            <el-form-item>
              <el-button type="primary" size="small"
                         @click="showAdd">新增
              </el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="row">
      <el-table :data="tableData" style="width: 100%" border v-loading="loading">
        <el-table-column label="序号" type="index" min-width="5%" width="100"/>
        <el-table-column prop="telephone" label="手机号" sortable width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180"/>
        <el-table-column prop="name" label="用户昵称" width="180"/>
        <el-table-column prop="password" label="密码" width="180"/>
        <el-table-column prop="time" label="充电总时长" width="180"/>
        <el-table-column label="操作" align="center">
          <template slot-scope='scope'>
            <el-button type="primary" @click="update(scope.row)">修改</el-button>
            <el-button type="danger" @click="deleted(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
                   :current-page="page.currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>

    <el-dialog :visible.sync="addVisible" width="800px" :title="title">
      <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"
                    show-password></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="telephone">
          <el-input maxlength="11" type="text" v-model="formData.telephone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input maxlength="16" type="text" v-model="formData.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSubmit">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'

export default {
  name: 'UserManage',
  components: {},
  data () {
    return {
      addVisible: false,
      loading: false,
      title: '新增',
      tableData: [],
      formData: {},
      page: {
        //当前显示页
        currentPage: 1,
        //分页大小
        pageSize: 10,
        //总记录
        total: 0,
      },
      queryParams: {
        name: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    resetQuery () {
      let arr = ['name']
      arr = arr.forEach(item => {
        this.queryParams[item] = null
      })
    },
    init () {
      this.loading = true
      axios.post('http://112.124.41.199:6112/csms/user/page', {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        name: this.queryParams.name
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data
        this.page = {
          //当前显示页
          currentPage: res.data.pageNo,
          //分页大小
          pageSize: res.data.pageSize,
          //总记录
          total: res.data.count,
        }
        this.switchReload(res)
      }).catch(err => {
        this.$message.error(err)
      })
    },
    switchReload (res) {
      // 防止切换页码导致查询数据不显示bug
      if (this.page.currentPage !== 1 && res.data.data.length === 0) {
        this.page.currentPage = 1
        this.init()
      }
    },
    showAdd () {
      this.addVisible = true
      this.title = '新增'
      this.formData = {}
      this.$refs.form.clearValidate()
    },
    update (row) {
      this.addVisible = true
      this.title = '修改'
      this.formData = row
      this.$refs.form.clearValidate()
    },
    deleted (row) {
      this.$confirm('你确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        axios.post('http://112.124.41.199:6112/csms/user/deleted', {
          userid: row.userid,
        }).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功')
            this.init()
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post('http://112.124.41.199:6112/csms/user/saveOrUpdate', {
            userid: this.formData.userid,
            username: this.formData.username,
            password: this.formData.password,
            name: this.formData.name,
            telephone: this.formData.telephone,
            email: this.formData.email,
            usertype: 1,
          }).then(res => {
            if (res.data.success) {
              this.addVisible = false
              this.init()
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
        } else {
          return false
        }
      })
    },
    search () {
      this.init()
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.page.currentPage = 1
      this.init()
    },
    handleCurrentChange (e) {
      this.page.currentPage = e
      this.init()
    }
  }
}
</script>

<style scoped>

.app-container >>> .el-table .cell {
  white-space: pre-line;
  text-align: center;
}

.app-container {
  background-color: white;
  margin: 20px 20px;

}

.app-container .el-table p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

.top-right-btn {
  float: none;
}

.el-table__fixed-right {
  height: 100% !important;
}

.row {
  margin-bottom: 15px;
  overflow: auto;
}

.el-pagination {
  margin-top: 15px;
}

.line {
  display: flex;
}

.el-input {
  margin-right: 15px;
}

.el-dialog {


}

.el-dialog p {
  margin: 10px 0;
}

.el-dialog p .el-dialog .table {
  overflow-x: auto;
}

.el-dialog p .tableList {
  display: flex;
}

.box {
  min-width: 190px;
  height: 150px;
  border: 1px solid #e5e5e5;
  margin-right: 15px;
  padding: 5px 10px;
  margin-bottom: 15px;
}

.float {
  display: flex;
  justify-content: space-between;
}
</style>
